<template>
    <div>
      <input type="text" v-model="name">
      <input type="text" v-model="age">
      <hr>
      姓名:<input type="text" v-model="form.userInfo.name">
      年龄:<input type="text" v-model="form.userInfo.age">
      <hr>
      用户名:<input type="text" v-model="form.userName">
      用户年龄:<input type="text" v-model="form.userAge">
    </div>
  </template>
  
  <script>
  export default {
    data(){
      return{
        name: '',
        age: '',
        form:{
          userName: '',
         userInfo:{
          name: '',
          age: ''
          }
        }
      }
    },
    watch:{
      name(newVal,oldVal){
        console.log(newVal,oldVal);
      },
      age:{
        handler(newVal,oldVal){
          console.log('newVal:',newVal,'oldVal:',oldVal);
        },
        immediate: true
      },
      form:{
        handler(newVal,oldVal){
          console.log('newVal:',newVal,'oldVal:',oldVal);
          console.log('监测form变化');
        },
        deep:true
      },
      'form.userName'(newVal,oldVal){
        console.log('监测form变化',newVal,oldVal);
      }
    }
  }
  </script>
  
  <style>
  
  </style>